<template>
    <svg class="svg-icon" :style="{color:color,fontSize:iconSize}"><use :xlink:href="iconName"></use></svg>
</template>

<script>
export default {
	name: 'SvgIcon',
	props: {
		iconClass: {
			type: String,
			required: true
		},
		iconColor:{
			type: String,
		},
		iconSize:{
			type: String,
		}
	},
	computed: {
		iconName() {
			return `#icon-${this.iconClass}`
		},
		color(){
			return `${this.iconColor}`
		}
	}
};
</script>

<style scoped>
.svg-icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	overflow: hidden;
	fill: currentcolor;
}
</style>



